import { Button, Form, Input, message, Modal, Select } from 'antd'
// import styles from './index.module.scss'
import './index.css'
import { useEffect, useRef, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { addDepart, getPerson, handlePart } from '@/store/actions/editDepart'
import { getDepartment } from '@/store/actions/department'

const EditDepartModel = ({
  isModalOpen,
  setIsModalOpen,
  isEdit,
  pid,
  setId,
}) => {
  const [confirmLoading, setConfirmLoading] = useState(false)
  const dispatch = useDispatch()

  //如果是编辑状态，网络请求获取的数据存放位置
  const editDataRef = useRef(null)

  useEffect(() => {
    //用来获取部门负责人
    dispatch(getPerson())
    //编辑状态获取原信息
    if (isEdit) {
      dispatch(handlePart(pid, 'get')).then(({ data }) => {
        editDataRef.current = data
        form.setFieldsValue(data)
      })
    }
  }, [])

  const [form] = Form.useForm()
  const person = useSelector((state) => state.editDepart)

  //表单提交
  const handleOk = async () => {
    try {
      const msg = await form.validateFields()
      console.log(msg)
      setConfirmLoading(true)
      //判断是否是编辑状态
      if (!isEdit) {
        //不是编辑状态
        const data = {
          ...msg,
          pid: pid,
        }
        await dispatch(addDepart(data))
      } else {
        //是编辑状态
        const data = {
          ...editDataRef.current,
          ...msg,
        }
        await dispatch(handlePart(data.id, 'update', data))
      }
      //关闭模态框
      setConfirmLoading(false)
      setIsModalOpen(false)
      setId(null)
      //刷新数据
      await dispatch(getDepartment())
      message.success('操作成功')
    } catch (e) {
      message.warning(e.message)
      setConfirmLoading(false)
    }
  }
  const handleCancel = () => {
    setIsModalOpen(false)
  }

  return (
    <div>
      <Modal
        title={isEdit ? '编辑部门' : '新增部门'}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        width="890px"
        confirmLoading={confirmLoading}
        destroyOnClose={true}
        // wrapClassName="depart_model"
      >
        <Form
          name="basic"
          labelCol={{
            span: 4,
          }}
          wrapperCol={{
            span: 18,
          }}
          style={{
            maxWidth: 820,
          }}
          initialValues={{
            remember: true,
          }}
          // onFinish={onFinish}
          // onFinishFailed={onFinishFailed}
          autoComplete="off"
          form={form}
          preserve={false}
        >
          <Form.Item
            label="部门名称"
            name="name"
            rules={[
              {
                required: true,
                message: '部门名称不能为空!',
              },
              {
                type: 'string',
                max: 50,
                min: 1,
                message: '1-50个字符',
              },
            ]}
            validateTrigger="onBlur"
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="部门编码"
            name="code"
            rules={[
              {
                required: true,
                message: '部门编码不能为空!',
              },
              {
                type: 'string',
                max: 50,
                min: 1,
                message: '1-50个字符',
              },
            ]}
            validateTrigger="onBlur"
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="部门负责人"
            name="manager"
            rules={[
              {
                required: true,
                message: '请选择部门负责人',
              },
            ]}
          >
            <Select
              placeholder="请选择"
              allowClear
              options={person}
              fieldNames={{ label: 'username', value: 'username' }}
            />
          </Form.Item>

          <Form.Item
            label="部门介绍"
            name="introduce"
            rules={[
              {
                required: true,
                message: '请输入部门介绍',
              },
            ]}
          >
            <Input.TextArea allowClear showCount />
          </Form.Item>

          {/*<Form.Item*/}
          {/*  wrapperCol={{*/}
          {/*    offset: 8,*/}
          {/*    span: 16,*/}
          {/*  }}*/}
          {/*>*/}
          {/*  <Button type="primary" htmlType="submit">*/}
          {/*    Submit*/}
          {/*  </Button>*/}
          {/*</Form.Item>*/}
        </Form>
      </Modal>
    </div>
  )
}

export default EditDepartModel
